<template>
  <el-dialog
    ref="my-dialog"
    v-el-drag-dialog
    :class="['my-dialog', isFullScreen ? 'is-fullscreen' : '']"
    :top="$attrs.top || '50px'"
    v-bind="$attrs"
    v-on="$listeners"
    :title="title"
    :append-to-body="appendToBody"
  >
    <template slot="title">
      <div class="my-dialog-header" :style="{'background-color': theme}">
        <slot name="title">{{ title }}</slot>
        <div v-if="showFull" class="my-dialog-menu">
          <i class="el-dialog__close el-icon-full-screen" @click="fullScreenCheck" />
        </div>
      </div>
    </template>
    <slot />
    <template slot="footer">
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"
import { mapState } from "vuex"

export default {
  name: "MyDialog",
  directives: { elDragDialog },
  props: {
    title: {
      type: String,
      default: ""
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    showFull: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isFullScreen: this.fullscreen
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme
    })
  },
  methods: {
    fullScreenCheck() {
      this.isFullScreen = !this.isFullScreen
      this.$emit("fullScreen", this.isFullScreen)
    }
  }
}
</script>

<style lang="scss">
.my-dialog {
  .el-dialog {
    // margin-top: 0 !important;
    // top: 50% !important;
    // transform: translateY(-50%);
    margin: 0 auto;
    .el-dialog__header {
      margin-bottom: 10px;
      padding: 0;
    }
    .el-dialog__headerbtn {
      top: 16px;
      font-size: 24px;
    }
    .my-dialog-header {
      display: flex;
      padding: 15px;
      align-items: center;
      justify-content: space-between;
      .my-dialog-menu {
        padding-right: 40px;
        font-size: 20px;
        cursor: pointer;
        i {
          vertical-align: middle;
        }
        .el-icon-full-screen:before {
          content: "\e719";
        }
      }
    }
  }
  &.is-fullscreen {
    .el-dialog {
      width: 100vw !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      height: 100vh !important;
      overflow: auto !important;
      position: initial !important;
      max-height: 100vh !important;
    }
  }
}
</style>
